/**
 * @date: 2025/3/30
 * @author: 小红
 * @fileName: DropdownAction
 * @Description: 下拉菜单操作
 */

export type BtnType = 'warning' | 'danger' | 'text';

import { Dropdown, Doption } from '@arco-design/web-vue';
import './style.scss';

export interface DropdownActionItem {
	label: string;
	icon?: string;
	type?: BtnType;
	hidden?: boolean;
	onClick: () => void;
}

const DropdownAction = defineComponent({
	name: 'DropdownAction',
	props: {
		items: {
			type: Array as PropType<Array<DropdownActionItem>>,
			default: () => [],
		},
		trigger: {
			type: String,
			default: '',
		},
	},
	setup(props, { slots }) {
		const getClass = (type?: BtnType) => {
			switch (type) {
				case 'warning':
					return 'color-#ff7d00!';
				case 'danger':
					return 'color-red!';
				case 'text':
					return 'color-#555!';
				default:
					return 'color-#555!';
			}
		};
		return () => (
			<Dropdown class={'dropdown-action'}>
				{{
					default: () => (slots.default ? slots.default() : <i class="EachApp EachApp_gengduo1 px-6px py-3px rounded-4px cursor-pointer hover:bg-#eee"></i>),
					content: () =>
						props.items.map((item) => (
							<Doption
								vShow={!item?.hidden}
								onClick={item.onClick}
								class={getClass(item.type)}
							>
								{{
									default: () => item.label,
									icon: () => (item.icon ? <i class={[item.icon, 'text-13px']}></i> : null),
								}}
							</Doption>
						)),
				}}
			</Dropdown>
		);
	},
});

export default DropdownAction;
